import React, { useEffect, useMemo, useState } from 'react';
import OrderItem from './orderItem';
import styled from './orderList.module.css';
import TableHeader from './tableHeader';
import Operate from './Operate';
import { IOrderItem } from '../types';
import { Pagination } from 'antd';
import { IPaginateMeta, IPagination, PaginateReturn } from '@/views/types';
import { IResponse } from '@/types';
import { fetchOrderList } from '@/api/order';
import usePagination from '@/views/goods/components/usePagination';
export default function OrderList({
    status,
    goPay,
}: {
    status: number;
    goPay: (id: string, total_price: number) => void;
}) {
    const [orderList, setOrderList] = useState<IOrderItem[]>([]);
    const [total, setTotal] = useState(0);
    const [paginateMeta, setPaginationMeta] = useState<IPaginateMeta>({
        prev: 0,
        next: 0,
        total: 0,
    });
    const filter_params = useMemo<
        IPagination & {
            status?: number;
        }
    >(() => {
        return {
            pageNumber: 1,
            pageSize: 10,
        };
    }, []);
    const getOrderList = async () => {
        console.log(status);
        const res = await fetchOrderList<any, IResponse<PaginateReturn<IOrderItem>>>(filter_params);
        if (res.data && res.statusCode === 200) {
            setOrderList(res.data.items);
            setTotal(res.data.paginateMeta.total);
            setPaginationMeta(res.data.paginateMeta);
        }
    };
    const {
        onChange: paginationChange,
        current: curPage,
        setCurrent: setPage,
    } = usePagination(filter_params, getOrderList);

    useEffect(() => {
        getOrderList();
    }, []);

    const orderTimeout = () => {
        // getOrderList();
    };

    const changePage = (type: string) => {
        if (type === 'next') {
            filter_params.pageNumber++;
        } else {
            filter_params.pageNumber--;
        }
        setPage(filter_params.pageNumber);
        getOrderList();
    };
    return (
        <div className={styled.orderList}>
            <TableHeader></TableHeader>
            <Operate changePage={changePage} paginateMeta={paginateMeta}></Operate>
            {orderList.map((item, index) => {
                return (
                    <OrderItem
                        goPay={goPay}
                        orderTimeout={orderTimeout}
                        key={index}
                        item={item}
                    ></OrderItem>
                );
            })}
            <Pagination
                style={{ padding: '20px 0' }}
                current={curPage}
                onChange={paginationChange}
                total={total}
            />
        </div>
    );
}
